<template>
    <PanelBox :image="image">
        <RiskPie class="risk-ratio-box" :data="data" />
    </PanelBox>
</template>

<script>
import PanelBox from "@/component/PanelBox";
import RiskPie from "./component/RiskPie";
import { FetchGetTailingRiskRatio } from "@/api";

export default {
    name: "RiskRatio",

    components: {
        PanelBox,
        RiskPie,
    },

    props: {
        image: {
            type: String,
            default() {
                return "";
            },
        },
    },

    data() {
        return {
            data: [
                // { name: "重大", value: 1 },
                // { name: "较大", value: 2 },
                // { name: "一般", value: 3 },
                // { name: "低", value: 4 },
            ],
        };
    },

    created() {
        this.refreshList();
    },

    methods: {
        refreshList() {
            FetchGetTailingRiskRatio().then((res) => {
                console.log(res);
                this.data = res.map((item) => ({
                    name: item.riskName,
                    value: item.count,
                }));
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.risk-ratio-box {
    width: 100%;
    height: 100%;
}
</style>
